<!-- 存档:不同Vant库的代码 -->
<template>
    <div class="tab-bar">
        <template v-for="(item, index) in tabbarData">
            <!-- 若点的是当前的元素则动态添加class -->
            <div class="tab-bar-item" :class="{active:currentIndex===index}" @click="clickItem(index,item)">
                <!-- 点到哪里亮哪里 -->
                <img v-if="currentIndex===index" :src="getAssetsUrl(item.imageActive)" alt="">
                <img v-else="currentIndex!==index" :src="getAssetsUrl(item.image)" alt="">
                <div class="text">{{ item.text }}</div>
            </div>
        </template>
    </div>
</template>

<script setup>
import tabbarData from '@/assets/data/tabbarData'
import { getAssetsUrl } from '@/utils/load_assets'
import {ref} from 'vue'
import {useRouter} from 'vue-router'

// 当前点的是currentIndex,把对应的index赋值给currentIndex
const currentIndex=ref(0)
const router=useRouter()

function clickItem(index,item){
    currentIndex.value=index
    router.push(item.path)
}

</script>

<style lang="less" scoped>
.tab-bar {
    // fixed 绝对位置 位于浏览器窗口的位置
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55px;

    // flex布局,
    display: flex;

    // 浅浅的上边缘
    border-top: 1px solid #f3f3f3;

    .tab-bar-item {
        // 每一个item各占1个位置:平分所有位置
        flex: 1;

        // 对于每个item里面的img和text
        // 要求上下排列,要求他们居中,所以flex
        display: flex;
        flex-direction: column;

        // x轴方向上居中
        justify-content: center;

        // 若无align-items,每个item会把flex格子占满
        // align-items会让元素在Y轴对齐
        align-items: center;

        // 点击active效果
        &.active{
            color:var(--primary-color)
        }

        img {
            height: 36px;
        }

        .text {
            font-size: 12px;
        }
    }

}
</style>